<template>
    <uni-card>
        <view class="" style="height: 20rpx;">
            
        </view> 
        <button class="addorder" @click="$navto(`/pages/proplist/from?oid=${oid}`)" type="primary" size="mini" v-if="type == 'add'">添加道具</button>
        
        <gridTable ref="gridTable" align="center" @del="del" :oid="parseInt(oid)" :proplist="proplist"></gridTable>
        <view class="" style="height: 20rpx;">
            
        </view> 
 <!--      <view class="btns" v-if="type == 'add'">
           <lsj-upload
           
               ref="lsjUpload"
               childId="upload1"
               width="480rpx"
               height="80rpx"
               :option="option"
               :size="30"
               :count="1"
               formats="xlsx"
               :debug="true"
               :instantly="true"
               :multiple="false"
               @uploadEnd="onuploadEnd"
               @progress="onprogre"
               @change="change">
                   <button class="next-btn" type="primary" size="mini">上传导入</button>
                
           </lsj-upload>
           <view>
               
           </view>
          
        </view>
        <view v-for="(item,index) in files.values()" :key="index">
            <text style="margin-left: 10rpx;">上传进度：<text class="status_1">{{item.progress}}</text> %</text>
        </view> -->
    </uni-card> 
</template>

<script>
    import gridTable from '@/components/table.vue';
    
    var def_prop = {
        id:0,
        pid:'',
        thumb:'',
        title:'',
        drawing:'',
        position:'',
        num:1,
        unit:'件',
        spec:"",
        desc:'',
        msg:'',
        p_name:'',
        p_index:''
    }
    export default{
        name:"propadd",
        data(){
            return{
                proplist:[],
                oid:null,
                type:null,
                option:{},
                files: new Map(),
            }
        },
        components:{
            gridTable
        },
        onLoad(option){
            this.oid = option.id
            if(option){
                this.type = option.type
            }
            this.option = {
                url:this.$api.postURL+'prop/importexcel',
                name: 'file',
                header:{
                    'Authorization':uni.getStorageSync('nangtong_login_token')
                },
                formData:{
                    oid:this.oid
                }
            }
        },
        onShow(){
            var _this = this
            _this.getlists()
            setTimeout(function(){
                _this.$refs.gridTable.updatetable()
            },500)
        },
        methods:{
            /**
             * 某文件上传结束回调(成功失败都回调)
             * @param {Object} item 当前上传完成的文件
             */
            onuploadEnd(item) {
                console.log(`${item.name}已上传结束，上传状态=${item.type}`);

                // 更新当前窗口状态变化的文件
                this.files.set(item.name,item);

                // 强制更新视图
                this.$forceUpdate();

                // ---可删除--演示判断是否所有文件均已上传成功
                let isAll = [...this.files.values()].find(item=>item.type!=='success');
                if (!isAll) {
                    console.log('已全部上传完毕');
                }
                else {
                    console.log(isAll.name+'待上传');
                }

            },
            /**
             * 上传进度回调
             * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
             * @param {Object} item 当前正在上传的文件
             */
            onprogre(item) {
                // 更新当前状态变化的文件
                this.files.set(item.name,item);

                console.log('打印对象',JSON.stringify(this.files.get(item.name)));
                // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
             
                // 强制更新视图
                this.$forceUpdate();

            },
            /**
             * 文件选择回调
             * @param {Object} files 已选择的所有文件Map集合
             */
            change(files) {
                console.log('当前选择的文件列表：',JSON.stringify([...files.values()]));
                // 更新选择的文件 
                this.files = files;
                // 强制更新视图
                this.$forceUpdate();


            },
            del(index,ind){
                var id = this.proplist[index].child[ind].id
                this.$confirm('是否确认删除，删除后不可恢复').then(()=>{
                    this.$api.post(`prop/delprop`,{id:id}).then((r)=>{
                        if(this.proplist[index].child.length<=1){
                            this.proplist.splice(index,1)
                        }else{
                            this.proplist[index].child.splice(ind,1)
                        }
                        this.$refs.gridTable.updatetable()
                      
                    })
                    
                })
                
            },
            getlists(){
                this.$api.get(`prop/getlists?oid=${this.oid}`).then(({data})=>{
                    this.proplist = data.lists
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .btns{
        display: flex;
        justify-content: center;
        .next-btn{
            width: 90%;
        }
    }
</style>